<script setup lang="ts">
  import { ref } from 'vue'
  import MyListVue from './components/MyList.vue'
  import { MENU } from './constant'
  import { Dialog } from 'vant';
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup

const active = ref(0);

const beforeClose = (action:string):Promise<boolean> =>
  new Promise((resolve) => {
    setTimeout(() => {
      if (action === 'confirm') {
        resolve(true);
      } else {
        // 拦截取消操作
        resolve(false);
      }
    }, 1000);
  });
const add = () => {

  Dialog.confirm({
    title: '标题',
    message:
      '确认上架',
    beforeClose,
  });
}
const onback = () => {
  Dialog.alert({
    title: '提示',
    message: '后退',
  }).then(() => {
    // on close
  });
}
</script>

<template>
  <div class="container">
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onback"
    >
    <template #right>
      <van-button @click="add" type="primary" to="index">上架</van-button>
    </template>
  </van-nav-bar>
  
  <van-tabs v-model:active="active">
    <van-tab v-for="item in MENU" :title="item.name" :key="item.id">
      <MyListVue :typeId="item.id"/>
    </van-tab>
  </van-tabs>

  </div>
</template>

<style scoped>
  .container{
    height: 100%;
  }
</style>
